<template>
  <div class="page">
    <div class="contianer">
      <div class="bankcard" @click="changeBankCard">
        到账银行卡
        <span>{{defaultCard.bankName}} ({{defaultCard.bankCardTail}})</span>
      </div>
      <div class="cashbox">
        <div>提现金额</div>
        <div class="input-field2">
          <span class="rmb">￥</span>
          <input class="input-block" type="digit" v-model="orderAmount" @input="orderAmountChange" />
        </div>
        <div class="todobox">
          <p class="useful">可提现金额：￥{{allAmount}}</p>
          <p class="cashtext" @click="getCashAll">全部提现</p>
        </div>
      </div>
      <div :class="isDisabled?'cashbtn':'cashbtn_a'" @click="handleCash">提现</div>
    </div>

    <div class="bankCardBox" v-if="selectBankCard">
      <div class="bankCardCont">
        <p class="tit">选择银行卡</p>
        <div
          class="cards"
          @click="selectCashBankCard(item)"
          :class="item.id==defaultCard.id?'active':''"
          v-for="(item,idx) in cardList"
          :key="idx"
        >
          <p class="text">{{item.bankName}} 储蓄卡({{item.bankCardTail}})</p>
        </div>
        <div class="add-new">
          <!-- <p class="add">添加银行卡</p> -->
          <p class="plus-icon" @click="showNewTypeForm">添加银行卡</p>
        </div>
      </div>
      <div class="zz" @click="zzClick"></div>
    </div>

    <div class="popup-window" :class="{show:showConfirm}">
      <span class="close-icon" @click="handleHide">&times;</span>
      <div class="popup-wrap">
        <div class="input-field">
          <input
            v-model="verificationCode"
            class="input-block"
            type="text"
            placeholder="请输入验证码"
            placeholder-class="placeholder-part"
            maxlength="6"
          />
          <span class="btn-text" @click="cloudAccountWithdraw2">确认</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentPageParams } from '@/utils'
import {
  YST_FIND_BIND_CARD,
  CLOUD_ACCOUNT_WITHDRAW,
  LI_ZHENG_GET_IP,
  CLOUD_ACCOUNT_WITHDRAW_CONFIRM
} from '@/api'
export default {
  components: {},
  props: {},
  data () {
    return {
      orderAmount: '',
      selectBankCard: false,
      allAmount: null,
      cardList: [],
      defaultCard: {},
      isDisabled: true,
      platform: 1, // 提现访问终端
      bizOrderNo: '',
      showConfirm: false,
      verificationCode: '',
      consumerIp: '110.184.163.73'
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {
    orderAmount (val) {
      if (val) {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }
    }
  },
  created () {},
  onShow () {
    this.allAmount = getCurrentPageParams('allAmount')
    this.getBindCardList()
    this.getxcxIP()
    this.emptyInit()
  },
  mounted () {},
  methods: {
    orderAmountChange (e) {
      this.orderAmount = e.target.value
    }, // 新的获取orderAmount的值
    // 全部提现
    getCashAll () {
      this.orderAmount = this.allAmount
    },
    // 选择银行卡
    changeBankCard () {
      this.selectBankCard = true
    },
    zzClick () {
      this.selectBankCard = false
    },
    // 获取银行卡
    getBindCardList () {
      const vm = this
      let params = {
        identity: 'SHOP',
        relateId: vm.account.shopId
      }
      YST_FIND_BIND_CARD(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.cardList = r.data.data || []
            if (r.data.data.length > 0) {
              vm.defaultCard = r.data.data[0]
            } else {
              vm.defaultCard = {}
            }
            if (vm.cardList) {
              vm.cardList.forEach(_ => {
                _.bankCardTail = _.bankCardNo.substr(-4)
              })
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    // 点击提现
    handleCash () {
      if (this.isDisabled) {
        return false
      } else if (this.orderAmount * 100 > this.allAmount * 100) {
        this.$toast('提现金额大于已有金额')
      } else if (this.cardList.length <= 0) {
        this.$alert(
          '您暂未绑定银行卡，请到爱卡卡开店宝pc端管理系统登录开通。详情请咨询400-888-5115'
        ).then(r => {
          this.$router.go(-1)
        })
      } else {
        this.cloudAccountWithdraw()
      }
    },
    cloudAccountWithdraw () {
      const vm = this
      let params = {
        identity: 'SHOP',
        relateMan: vm.account.shopId,
        cardNo: vm.defaultCard.bankCardNo,
        orderAmount: vm.orderAmount * 100,
        source: vm.platform,
        withdrawType: 1 // 1 对私 // 2 对公
      }
      CLOUD_ACCOUNT_WITHDRAW(params)
        .then(r => {
          if (r.data.code === '0') {
            let { merOrderNum } = r.data.data
            vm.bizOrderNo = merOrderNum
            vm.showConfirm = true
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    // 选择提现银行卡
    selectCashBankCard (item) {
      this.defaultCard = item
      this.selectBankCard = false
    },
    // 添加银行卡
    showNewTypeForm () {
      this.$alert(
        '暂不支持绑定银行卡，请到爱卡卡开店宝pc端管理系统登录开通。详情请咨询400-888-5115'
      )
    },
    getxcxIP () {
      const vm = this
      LI_ZHENG_GET_IP()
        .then(r => {
          if (r.data.code === '0') {
            vm.consumerIp = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {})
    },
    handleHide () {
      this.showConfirm = false
      this.selectBankCard = false
      setTimeout(() => {
        this.orderAmount = ''
        this.verificationCode = ''
        this.bizOrderNo = ''
      }, 300)
    },
    cloudAccountWithdraw2 () {
      const vm = this

      if (!vm.verificationCode) {
        vm.$toast('请输入验证码')
        return false
      }

      let params = {
        orderNo: vm.bizOrderNo,
        consumerIp: vm.consumerIp,
        code: vm.verificationCode,
        identity: 'SHOP',
        relateId: vm.account.shopId
      }

      CLOUD_ACCOUNT_WITHDRAW_CONFIRM(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('操作成功', '').then(() => {
              vm.handleHide()
              // vm.$toast('操作成功')
              // vm.getBalance()
              // vm.findAccountBalance()
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {})
    },
    // 初始化
    emptyInit () {
      this.orderAmount = ''
      this.selectBankCard = false
      this.showConfirm = false
      this.cardList = []
      this.defaultCard = {}
      this.isDisabled = true
      this.bizOrderNo = ''
      this.verificationCode = ''
      this.consumerIp = ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import "static/styles/color.scss";
.page {
  background: #f1f1f1;
  position: relative;
}
.contianer {
  padding: 20px;
}
.bankcard {
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #93a0ff, #6b7cfd);
  color: #ffffff;
  line-height: 60px;
  padding: 0 20px;
}
.cashbox {
  background: #ffffff;
  padding: 10px;
  > .input-field2 {
    display: flex;
    margin: 20px 0;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
    .rmb {
      font-weight: bold;
      font-size: 16px;
    }
    .input-block {
      color: $blue;
      padding: 0 5px;
      font-size: 18px;
    }
  }
  .todobox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    .useful {
      color: #cccccc;
      font-size: 13px;
    }
    .cashtext {
      color: #6b7cfd;
    }
  }
}
.cashbtn {
  width: 100%;
  height: 50px;
  border-radius: 50px;
  background: #dddddd;
  text-align: center;
  line-height: 50px;
  margin-top: 30px;
  color: #fff;
}
.cashbtn_a {
  width: 100%;
  height: 50px;
  border-radius: 50px;
  background: #828fff;
  text-align: center;
  line-height: 50px;
  margin-top: 30px;
  color: #fff;
}
.bankCardBox {
  position: absolute;
  bottom: 0;
  .bankCardCont {
    position: fixed;
    bottom: 0;
    z-index: 5;
    width: 100%;
    padding: 10px 15px;
    background: #fff;
    .tit {
      text-align: center;
      margin: 12px 0;
      font-size: 14px;
    }
    .cards {
      padding: 24px;
      color: #666;
      &.active {
        background: #828fff;
        color: #fff;
      }
      .text {
        font-size: 13px;
      }
    }
    .add-new {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 10px;
      padding-left: 20px;
    }
    .plus-icon {
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      &::before {
        content: "+";
        display: block;
        width: 14px;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        text-align: center;
        color: white;
        background-color: #588ced;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
  }
}
.zz {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.3;
}
.popup-window {
  display: flex;
  justify-content: center;
  align-items: center;
  > .popup-wrap {
    background-color: $white;
    width: 280px;
    border-radius: 8px;
  }
  .popup-wrap {
    padding: 15px;
    font-size: 15px;
    > .label {
      margin-bottom: 10px;
    }
    > .input-field {
      padding: 5px 10px;
      border: 1px solid $light-gray;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > .input-block {
        flex-grow: 1;
      }
      > .btn-text {
        color: $blue;
        padding: 0 5px;
        font-size: 18px;
      }
    }
    .input-field2 {
      padding: 5px 10px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > .input-block {
        flex-grow: 1;
        color: #e69734;
        font-size: 20px;
      }
      > .btn-text {
        color: #e69734;
        padding: 0 5px;
        font-size: 18px;
      }
    }
  }
}
</style>